<template>  
    <view class="container">  
		
		<view class="user-section">
			<image class="bg" :src="self_center.background_img" mode="widthFix" lazy-load></image>
			<view class="user-info-box">
				<view class="user-info-box-left">
					<view class="portrait-box">
						<!-- <image class="portrait" :src="user_info.avatar || '/static/buytao/index-right.png'"  mode="widthFix" lazy-load></image> -->					
						<avatar 
							selWidth="200px" selHeight="400upx" @upload="myUpload" :avatarSrc="user_info.avatar || '/static/buytao/index-right.png'"
							avatarStyle="width: 130upx; height: 130upx; border-radius: 100%;">
						</avatar>
					
					
					</view>
					<view class="info-box">
						<text class="username">{{user_info.nickname || user_info.wx_nickname || '游客'}}</text>
					</view>
				</view>
				<view class="user-info-box-right">
					<view>邀请码：{{invite_flag}}
						<text @click="copy_invite()">复制</text>
						<text v-if="show_hidden_invite" @click="show_hidden_invite_method()">隐藏</text>
						<text v-else @click="show_hidden_invite_method()">显示</text>
					</view>
					<view @click="exclusive()">申请专属口令</view>
				</view>
			</view>
			<view class="vip-card-box" :style="{backgroundImage:`url(${self_center.background1_img})`}">
				<!-- <image class="card-bg" src="/static/vip-card-bg.png"  mode="widthFix" lazy-load></image> -->
				<view class="b-btn" @click="withdraw()">
					提现
				</view>
				<view class="tit">
					余额：<text v-if="user_info.income">{{user_info.income.amount}}</text>
				</view>
				<text class="e-m">{{user_info.level_name}}</text>
				<text class="e-b">每月25日提现上月确认收货的订单收入</text>
			</view>
		</view>
		
		<view 
			class="cover-container"
			:style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
			@touchstart="coverTouchstart"
			@touchmove="coverTouchmove"
			@touchend="coverTouchend"
		>
			<image class="arc" src="/static/arc.png"></image>
			
			<view class="tj-sction" @click="navTo('/pages/income/index')">
				<view class="tj-item">
					<text class="num"><text v-if="user_info.income">{{user_info.income.today.estimate}}</text></text>
					<text>今日预估</text>
				</view>
				<view class="tj-item">
					<text class="num"><text v-if="user_info.income">{{user_info.income.month.estimate}}</text></text>
					<text>本月预估</text>
				</view>
				<view class="tj-item">
					<text class="num"><text v-if="user_info.income">{{user_info.income.lastmonth.estimate}}</text></text>
					<text>上月预估</text>
				</view>
			</view>
			<!-- 订单 -->
			<view class="order-section order-diy">
				<view class="order-item" @click="navTo('/pages/myorder/index')" hover-class="common-hover"  :hover-stay-time="50">
					<image src="../../static/buytao/dingdan.png" mode="widthFix" lazy-load></image>
					<text>订单</text>
				</view>
				<view class="order-item" @click="navTo('/pages/fans/index')"  hover-class="common-hover" :hover-stay-time="50">
					<image src="../../static/buytao/myfans.png" mode="widthFix" lazy-load></image>
					<text>粉丝</text>
				</view>
				<view class="order-item" @click="navTo('/pages/invitefriend/index')" hover-class="common-hover"  :hover-stay-time="50">
					<image src="../../static/buytao/yaoqing.png" mode="widthFix" lazy-load></image>
					<text>邀请</text>
				</view>
				<view class="order-item" @click="navTo('/pages/income/index')" hover-class="common-hover"  :hover-stay-time="50">
					<image src="../../static/buytao/shouyi.png" mode="widthFix" lazy-load></image>
					<text>收益</text>
				</view>
			</view>
			
			<!--系统工具-->
			<view class="scroll-view">
				<view class="scroll-view-H-title">
					<view>系统工具</view>
				</view>
				<view class="order-diy-section">
					<view class="order-item" hover-class="common-hover"  :hover-stay-time="50" v-for="(items,index) in self_center.menu1" :key="index" @click="navToRuter(items.route)" >
						<image :src="items.path" mode="widthFix" lazy-load></image>
						<text>{{items.name}}</text>
					</view>
				</view>
			</view>
			
			
			<!--活动广告-->
			<view class="scroll-view">
				<view class="scroll-view-H-title">
					<view>平台导向</view>
				</view>
				
				<view class="platform-view-section" v-for="(items,index) in self_center.ad1">
					<view class="platform-ad" v-for="(items_list,index_list) in items.list" @click="navToRuter(items.route)">
						<image :src="items_list.path" mode="widthFix" lazy-load></image>
					</view>
				</view>
				
				<view class="platform-view-section" v-for="(items,index) in self_center.ad2">
					<view class="platform-ad" v-for="(items_list,index_list) in items.list" @click="navToRuter(items.route)">
						<image :src="items_list.path" mode="widthFix" lazy-load></image>
					</view>
				</view>
				
			</view>
			
			
			<!-- 其他服务 -->
			<view class="scroll-view">
				<view class="scroll-view-H-title">
					<view>其他服务</view>
				</view>
				<view class="order-diy-section">
					<view class="order-item" hover-class="common-hover"  :hover-stay-time="50" v-for="(items,index) in self_center.menu2" :key="index" @click="navToRuter(items.route)" >
						<image :src="items.path" mode="widthFix" lazy-load></image>
						<text>{{items.name}}</text>
					</view>
				</view>
			</view>
			
			
			<view class="scroll-view">
				<view class="scroll-view-H-title">
					<view>今日值得买</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="20">
					<view class="scroll-view-item_H" v-for="(items,index) in home_today" :key="index" @click="goodsdetail(items)">
						<view class="view-item-menu">
							<image :src="items.PicLogo" mode="widthFix" lazy-load></image>
							<text>{{items.Title}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			
		</view>
			
			
			
		
    </view>  
</template>  
<script>
	import avatar from "../../components/yq-avatar/yq-avatar"
	import tools from "../../common/tools"
	import apiuser from '../../common/api/user'
	import listCell from '@/components/mix-list-cell'
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		components: {
			listCell,
			apiuser,
			avatar
		},
		data(){
			return {
				qiniu_token:'',				
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				//菜单滑动
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				
				invite_flag:'',				
				show_hidden_invite:true,
				
				self_center:[],//首页结构
				home_today:[],	//今日值得买商品
				user_info:[],//个人信息数据
			}
		},
		onShow(){
			tools.is_has_login('hasLogin')
			this.homeself_center()
			this.goodshome_today()
			this.get_userinfo()
		},
		onLoad(){
			this.getqiniutoken()
		},		
        methods: {
			
			//获取七牛上传token
			getqiniutoken(){
				apiuser.getqiniutoken({}).then(res =>{
					if(res.code==1){
						this.qiniu_token=res.data.token
					}
				}).catch(res=>{
					
				});
			},
			
			//复制邀请码
			copy_invite(){
				uni.setClipboardData({
					data: this.user_info.invite_code
				});
			},
			
			show_hidden_invite_method(){
				this.show_hidden_invite = this.show_hidden_invite ? false : true
				if(!this.show_hidden_invite){
					this.invite_flag = "******"
				}else{
					this.invite_flag = this.user_info.invite_code
				}
			},
			
			//上传头像
			myUpload(rsp) {
				uni.uploadFile({
					url: 'https://up.qiniup.com/',
					filePath: rsp.path,
					name: 'file',
					formData: {
						key: Math.round(new Date() / 1000),
						token: this.qiniu_token
					},
					success: result => {
						if(result.statusCode == 200){
							let qiniu_result = JSON.parse(result.data)
							let img_path='http://qn.enshitc.com/'+qiniu_result.key
							this.user_info.avatar=img_path
							apiuser.set_avatar({avatar:img_path}).then(res =>{
								if(res.code==1){
				　　　　　　　　　　uni.showToast({
				　　　　　　　　　　　　title: '设置成功',
				　　　　　　　　　　　　icon: 'none'
				　　　　　　　　　　})
								  tools.update_set_user()
								}else{
				　　　　　　　　　　uni.showToast({
				　　　　　　　　　　　　title: '上传失败,稍后重试',
				　　　　　　　　　　　　icon: 'none'
				　　　　　　　　　　})
								}
							}).catch(res=>{
								
							});
						}else{
		　　　　　　　　　　uni.showToast({
		　　　　　　　　　　　　title: '上传失败,稍后重试',
		　　　　　　　　　　　　icon: 'none'
		　　　　　　　　　　})
						}
					}
				})
			},
			
			
			//路由
			navToRuter(route){
				tools.router(route);
			},
			
			//商品详情
			goodsdetail(goods){
				uni.navigateTo({
					url: '../product/product?site='+goods.Site+"&goods_id="+goods.GoodsId,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//加载首页结构
			homeself_center(){
				apiuser.homeselfcenter({}).then(res =>{
					this.self_center=res.data;
				}).catch(cateres =>{
					
				});
			},
			
			//今日值得买
			goodshome_today(){
				apiuser.home_today({}).then(res =>{
					this.home_today=res.data;
				}).catch(cateres =>{
					
				});
			},
			
			//专属口令
			exclusive(){
				uni.navigateTo({
					url: '../set/exclusive',
				});
			},
			
			//提现
			withdraw(){
				uni.navigateTo({
					url:'../money/withdraw',
				})
			},
			
			//个人信息接口
			get_userinfo(){
				apiuser.get_userinfo({}).then(res =>{
					this.user_info = res.data
					this.invite_flag = this.user_info.invite_code
				}).catch(res=>{
					
				});
			},

			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url){
				uni.navigateTo({  
					url
				})  
			}, 
	
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e){
				if(pageAtTop === false){
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e){
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if(moveDistance < 0){
					this.moving = false;
					return;
				}
				this.moving = true;
				if(moveDistance >= 80 && moveDistance < 100){
					moveDistance = 80;
				}
		
				if(moveDistance > 0 && moveDistance <= 80){
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			coverTouchend(){
				if(this.moving === false){
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
        },
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			}else if(index === 1){
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
    }  
</script>  
<style lang='scss' scoped>
	.scroll-view{
		width: 99%;
		border-radius:20upx;
		background:#FFFFFF;
		margin-top:20upx;
	}
	
	.platform-view-section{
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
	}
	.platform-ad{
		flex:1;
		padding:20upx;
	}
	.platform-ad>image{
		width:100%;
	}
	
	.scroll-view-H-title{
		padding:20upx 0 20upx 20upx;
		font-size:40upx;
		font-weight:bold;
		border-bottom:1px solid #F5F5F5;
	}
	.scroll-view_H{
		flex-direction: row;
		white-space: nowrap;
	}
	.scroll-view-item_H{
		width: 40%;
		display: inline-block;
		flex-wrap: nowrap;
	}
	.view-item-menu{
		display: block;
		text-align:center;
		line-height:40px;
	}
	.view-item-menu>image{
		margin:0 auto;
		width:95%;
		display: block;
		border-radius:10upx;
	}
	.view-item-menu text{
		display:block;
		padding:0 20upx;
		white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
		overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
		text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
		-o-text-overflow: ellipsis; /* 特定浏览器前缀 */
		text-decoration: none; /* 无用 */
	}
	.home-list-item{
		width: 750upx;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
	}
	
	.order-diy-section{
		width:100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
		padding-top:20upx;
	}
	.order-diy-section .order-item{
		width:25%;
		margin-bottom:20upx;
		padding-bottom:30upx;
	}
	.order-diy-section .order-item>image{
		display:block;
		margin:0 auto;
	}
	.order-diy-section .order-item>text{
		display:block;
		text-align:center;
	}
	
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}
	.order-item>image{
		width:60upx;
		height:60upx;
	}
	.user-section{
		height: 520upx;
		padding: 100upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}
	.user-info-box{
		height: 180upx;
		display:flex;
        flex-direction: row;
        flex-wrap: wrap;
		align-items:center;
		position:relative;
		z-index: 1;
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size:30upx;
			color: $font-color-dark;
			margin-left: 20upx;
		}
	}
	
	.user-info-box-left{
		width:40%;
		display:flex;
        flex-direction: row;
        flex-wrap: wrap;
		.portrait-box{
			width:50%;
		}
		.info-box{
			padding-top:40upx;
			width:50%;
		}
	}
	.user-info-box-right{
		width:60%;
		text-align:right;
		color: #464646;
		view{
			font-size:25upx;
			text{
				margin:0 10upx;
			}
		}
	}
	.user-info-box-right>view:last-child{
		display: inline-block;
		border:1px #464646 solid;
		padding:0 10upx;
		margin-top:20upx;
		border-radius:10upx;
	}

	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
		.b-btn{
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 152upx;
			height: 60upx;
			text-align: center;
			line-height: 60upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}
		.tit{
			font-size: $font-base+5upx;
			color: #FFFFFF;
			margin-bottom: 28upx;
			.yticon{
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}
		.e-m{
			color:#FFFFFF;
		}
		.e-b{
			font-size: $font-sm;
			color: #FFFFFF;
			margin-top: 10upx;
		}
	}
	.cover-container{
		background: $page-color-base;
		margin-top: -150upx;
		padding: 0 30upx;
		position:relative;
		background: #f5f5f5;
		padding-bottom: 20upx;
		.arc{
			position:absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}
	.tj-sction{
		@extend %section;
		.tj-item{
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}
		.num{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}
	.order-diy{
	}
	.order-section{
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}
		.yticon{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
	}
	.history-section{
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;
			.yticon{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
	
</style>